import React, { MouseEventHandler, useRef } from 'react';
import {useClickOutside} from '@/fplayer/utils/click_outside';
import './index.scss';

const DocPosition: React.FC = () => {
  const box1 = useRef<HTMLDivElement>(null);
  const box2 = useRef<HTMLDivElement>(null);
  const box3 = useRef<HTMLDivElement>(null);
  const {visible,setVisible,ref} = useClickOutside(true, box2);
  const handleBox3Click = () => {
    console.log(`box3--x:${box3.current?.offsetLeft}，y：${box3.current?.offsetTop}`);
    console.log(`box2--x:${box2.current?.offsetLeft}，y：${box2.current?.offsetTop}`);
    console.log(`box1--x:${box1.current?.offsetLeft}，y：${box1.current?.offsetTop}`);
    console.log('box3 parent:');
    console.log(box3.current?.offsetParent);
  };
  return (
    <div className="box1" ref={box1}>
      <div className="box2" ref={box2}>
        <div className="box3" onClick={handleBox3Click} ref={ref} style={{ display: visible ? 'block' : 'none'}} />
      </div>
    </div>
  );
};

export default DocPosition;
